<script>
// 播放音乐
var sound = document.getElementById("sound")
sound.volume = 0.9;
//        sound.play();

// 设置画图元素
var bg = new Image();
bg.src = "img/bg.png";
var flower = new Image();
flower.src = "img/flower.png";

// 画布图像
var canvas = document.getElementById("pane");
var ctx = canvas.getContext("2d");


// 绘制图像
//        bg.onload = function () {
//            ctx.drawImage(bg, 0, 0);
//        }
//        flower.onload = function () {
////            var flowerX = Math.floor(Math.random() * (1024-flower.naturalWidth));
////            var flowerY = Math.floor(Math.random() * (520-flower.naturalHeight));
////
////            var scale = Math.floor(Math.random()*71 + 30)/100;
//
//            // 在缩放指定的对象前,前保存,之后在恢复;save 作用是不影响其他对象
//            ctx.save();
//            ctx.scale(scale, scale);
//            ctx.drawImage(flower, flowerX, flowerY);
//            ctx.restore();
//        }


//
var flowers = [];
for(var i = 0; i < 100 ; i++){
    flowers[i] = new MyFlower();
}


// 绘制图像
// 注意 JS 的方法名首字母必须是大写
var f = new MyFlower();
setInterval(function () {
    ctx.drawImage(bg, 0, 0);

    for(var i=0;i<flowers.length;i++) {
        flowers[i].paint();
    }

}, 50); // 50毫秒定时器

function MyFlower() {
    // this 作用是将变量声明成对象的属性
    // 随机 X、Y坐标
    this.flowerX = Math.floor(Math.random() * (1024-flower.naturalWidth));
    this.flowerY = Math.floor(Math.random() * (520-flower.naturalHeight));
    // 随机缩放值
    /*
     * Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值
     * 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
     * */
    // 例如：var a=Math.random()*2+1，设置一个随机1到3(取不到3)的变量。

    this.scale = Math.floor(Math.random() * 71 + 30)/100;
    var result =  document.getElementById("scale");
    result.innerHTML = "缩放值是: " + this.scale;

    // 下落步长
    this.step = Math.floor(Math.random()*5 + 1);

    // 绘制图像
    this.paint = function () {
//                this.scale = Math.floor(Math.random() * 70 + 30)/100;
//                var result =  document.getElementById("scale");
//                result.innerHTML = "缩放值是: " + this.scale;

        // 坠落
        this.flowerY += this.step;

        // 绘制图像
        ctx.save();
//                ctx.translate(this.flowerX, this.flowerY);

        ctx.scale(this.scale, this.scale);

        ctx.drawImage(flower, this.flowerX, this.flowerY);
        ctx.restore();

        // 边界判断
        if (this.flowerY >= 520){
            this.flowerY = -flower.naturalHeight;
            this.flowerX = Math.floor(Math.random() * (1024-flower.naturalWidth));
        }
//                if (this.flowerX >= 1024){
//                    this.flowerX = -flower.naturalWidth;
//                    this.flowerY = Math.floor(Math.random() * (520-flower.naturalHeight));
//                }
    }
}
</script>